<template>
  <el-main>
    <el-row>
      <el-col :span="8">
        <span>布置老师{{getschooluserbyid(homework.uid ).name}}</span>
      </el-col>
      <el-col :span="8">
        <span>提交时间：{{totime(homework.updatedAt )}}</span>
      </el-col>
      <el-col :span="8">
        <span></span>
      </el-col>
    </el-row>
    <div class="row border-top">
      <div class="col-lg-8 border-right padd35">
        <div class="border-bottom">
          <el-tag
            v-for="(v, i) in homework.schoolhomeworkitembank"
            :type="index === i?'primary':'info'"
            :key="`1watchstudenthomework${i}`"
            @click="index = i"
          >{{v.name}}</el-tag>
        </div>
        <br />
        <br />
        <div class="container">
          <div class="row">
            <div class="col-sm-2 text-center">名称</div>
            <div class="col">{{itembank.name}}</div>
          </div>
          <div class="row">
            <div class="col-sm-2 text-center">类型</div>
            <div class="col">{{itembank.type}}</div>
          </div>
          <div class="row">
            <div class="col-sm-2 text-center">内容</div>
            <div class="col">
              <div style="width: 375px;" class="border" v-html="itembank.text"></div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-2 text-center">答案</div>
            <div
              class="col"
            >{{itembank.data.answer?typeof(itembank.data.answer) === 'object'?itembank.data.answer.join(' '):itembank.data.answer:'' }}</div>
          </div>
          <div class="row">
            <div class="col-sm-2 text-center">解析</div>
            <div class="col" v-text="itembank.analysis"></div>
          </div>
          <div class="row">
            <div class="col-sm-2 text-center">知识点</div>
            <div class="col" v-text="itembank.knowledgepoints"></div>
          </div>
          <div class="row">
            <div class="col-sm-2 text-center">标签</div>
            <div class="col" v-text="itembank.tags"></div>
          </div>
        </div>
      </div>
    </div>
  </el-main>
</template>

<script>
import { mapGetters } from "vuex";
import { totime } from "../../../utils.js";
export default {
  data() {
    return {
      star: 5,
      colors: ["#99A9BF", "#F7BA2A", "#FF9900"],
      comment: null,
      index: 0,
      context: ""
    };
  },
  name: "watchhomework",
  computed: {
    ...mapGetters([
      "getschoolstudent",
      "getschoolclazz",
      "getschoolhomework",
      "getschooluser",
      "getschoolstudentbyid",
      "getuser",
      "getschooluserbyid"
    ]),
    homework() {
      return this.getschoolhomework.find(v => v.ID == this.ID);
    },
    itembank() {
      return this.homework.schoolhomeworkitembank[this.index];
    },
    ID() {
      return this.$route.params.ID;
    }
  },
  methods: {
    totime
  }
};
</script>

<style lang="scss" scoped>
.block {
  width: 300px;
  height: 300px;
  padding: 5px;
  display: inline-block;
}
.school-row {
  margin-top: 3px;
  border-top: 4px solid #eeeeee;
  padding-top: 12px;
}
.padd35 {
  padding: 35px;
}
</style>